<!--
 * @FilePath: DormitRateScore.vue
 * @Author: jack
 * @Date: 2025-03-26 09:51:49
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-03-26 09:52:03
 * Copyright: 2025 xxxTech CO.,LTD. All Rights Reserved.
 * @Descripttion: 
-->
<template>
    <div class="DormitBox" :style="'height:' + dormitScoreHeight + 'px;overflow: hidden;'">
        <div class="leftBox" v-if="dormitScore.length > 0">
            <div class="name" ref="nameRef">{{ Number(mode) == 1 ? '宿舍扣分排行榜' : '宿舍扣分排行榜' }}</div>
            <div class="listBox listBox2" :style="'width:100%;height:' + ringBarHeight + 'px;overflow: hidden;'">
                <div class="rowBox" ref="con1" :class="{ anim: animate == true }">
                    <div class="row-item" v-for="(item, index) in dormitScore" :key="index" style="'width:100%;"
                        ref="rowItemOne">
                        <div class="row-item-left" :class="item.rankNum < 4 ? 'rankImage1' : ''">
                            {{ item.rankNum }}
                        </div>
                        <div class="row-item-right">
                            <div class="ranking-info">
                                <div class="info-name">{{ item.room_name }}</div>
                                <div class="ranking-value">{{ item.score }}分</div>
                            </div>
                            <div class="ranking-column">
                                <div class="inside-column"
                                    :style="'width:' + ((Math.abs(item.score) * 100) / max) + '%;'">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="line" v-if="dormitScore2.length > 0 && dormitScore.length > 0"
            :style="'height:' + ringBarHeight + 'px;margin-top:' + nameheight + 'px;'">
        </div>
        <NoDate v-if="dormitScore2.length == 0 && dormitScore.length == 0"></NoDate>
        <div class="rightBox" v-if="dormitScore2.length > 0">
            <div class="name" ref="nameRef">{{ Number(mode) == 1 ? ' 星级宿舍排行榜' : ' 星级宿舍排行榜' }}</div>
            <div class="listBox" :style="'width:100%;height:' + ringBarHeight + 'px;overflow: hidden;'">
                <div class="rowBox" ref="con2" :class="{ anim: animate2 == true }">
                    <div class="row-item" v-for="(item, index) in dormitScore2" :key="index" style="'width:100%;"
                        ref="rowItemOne">
                        <div class="row-item-left" :class="item.rankNum < 4 ? 'rankImage2' : ''">
                            {{ item.rankNum }}
                        </div>
                        <div class="row-item-right">
                            <div class="ranking-info">
                                <div class="info-name">{{ item.room_name }}</div>
                                <div class="ranking-value">+{{ item.score }}分
                                </div>
                            </div>
                            <div class="ranking-column">
                                <div class="inside-column"
                                    :style="'width:' + ((Math.abs(item.score) * 100) / max2) + '%;'">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import NoDate from '../components/Common/NoDate.vue'
export default {
    components: {
        NoDate
    },
    props: {
        dormitScore: {
            type: Array,
            default: []
        },
        dormitScore2: {
            type: Array,
            default: []
        },
        dormitScoreHeight: {
            type: Number,
            default: 0
        },
        max2: {
            type: Number,
            default: 0
        },
        max: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            animate: false,
            animate2: false,
            dormitTimer1: null,
            dormitTimer2: null,
            ringBarHeight: 0,
            rowNum: 0,
            nameheight: 0,
            mode: this.$route.query.mode
        }
    },
    watch: {
        dormitScoreHeight: {
            handler: function (newValue, oldValue) {
                this.getHeight()
            }
        },
        dormitScore: {
            handler: function (newValue, oldValue) {
                this.getHeight()
            }
        },
        dormitScore2: {
            handler: function (newValue, oldValue) {
                this.getHeight()
            }
        },
    },
    methods: {
        // // 向上轮播方法
        // ScrollUp() {
        //     var con1 = this.$refs.con1
        //     var height = this.$refs.rowItemOne[0].clientHeight
        //     con1.style.marginTop = '-' + height + 'px'
        //     this.animate = !this.animate
        //     var that = this // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
        //     setTimeout(function () {
        //         // 单条滚动
        //         that.dormitScore.push(that.dormitScore[0])
        //         that.dormitScore.shift()
        //         con1.style.marginTop = '0px'
        //         that.animate = !that.animate // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
        //     }, 500)
        // },
        // // 向上轮播方法
        // ScrollUp2() {
        //     var con1 = this.$refs.con2
        //     var height = this.$refs.rowItemTwo[0].clientHeight
        //     con1.style.marginTop = '-' + height + 'px'
        //     this.animate2 = !this.animate2
        //     var that = this // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
        //     setTimeout(function () {
        //         // 单条滚动
        //         that.dormitScore2.push(that.dormitScore2[0])
        //         that.dormitScore2.shift()
        //         con1.style.marginTop = '0px'
        //         that.animate2 = !that.animate2 // 这个地方如果不把animate2 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
        //     }, 500)
        // },
        getHeight() {
            setTimeout(() => {
                if (this.dormitScore2.length > 0 || this.dormitScore.length > 0) {
                    var height = this.$refs.rowItemOne[0].clientHeight  // 单条数据的高度
                    this.rowNum = Math.trunc((this.dormitScoreHeight - this.$refs.nameRef.clientHeight) / Math.ceil(this.$refs.rowItemOne[0].clientHeight))
                    this.ringBarHeight = this.rowNum * Math.ceil(height)
                    this.nameheight = this.$refs.nameRef.clientHeight
                }
            }, 500)
        },
    },
    async mounted() {
        // setTimeout(() => {
        //     this.dormitTimer1 = null
        //     this.dormitTimer2 = null
        //     if (this.dormitScore.length > this.rowNum) {
        //         this.dormitTimer1 = setInterval(this.ScrollUp, 3000)
        //     }
        //     if (this.dormitScore2.length > this.rowNum) {
        //         this.dormitTimer2 = setInterval(this.ScrollUp2, 3000)
        //     }
        // }, 500)
    },
    // destroyed() {
    //     // 使用clearInterval清除定时器
    //     clearInterval(this.dormitTimer1)
    //     clearInterval(this.dormitTimer2)
    // },
}
</script>
<style lang="less" scoped>
.DormitBox {
    display: flex;
    padding: 0 40px;
    position: relative;

    .name {
        padding-top: 18px;
        padding-bottom: 4px;
        font-size: 16px;
        font-weight: bold;
        color: #FFFFFF;
    }

    .leftBox {
        flex: 1;
    }

    .line {
        width: 1px;
        background: #2E55CB;
        margin: 0 50px;

    }

    .rightBox {
        flex: 1;
    }

    .listBox {
        // margin-top: 10px;

        .row-item {
            transition: all .3s;
            padding-top: 20px;
            display: flex;
            align-items: center;

            .row-item-left {
                width: 40px;
                height: 40px;
                margin-right: 20px;
                color: #FFFFFF;
                display: flex;
                align-items: center;
                justify-content: center;
                background-image: url('../assets/img/pm_bule.png');
                background-size: 100% 100%;
                font-size: 18px;
                font-weight: bold;
            }

            .rankImage1 {
                background-image: url('../assets/img/pm_yellow.png');

            }

            .rankImage2 {
                background-image: url('../assets/img/pm_green.png');
            }

            .row-item-right {
                flex: 1;

                .ranking-info {
                    font-size: 16px;
                    color: #FFFFFF;
                    display: flex;
                    align-items: center;
                    font-weight: bold;

                    .info-name {
                        flex: 1;
                    }

                    .ranking-value {
                        font-weight: bold;
                        color: #66FFFF;
                        font-size: 16px;
                    }
                }

                .ranking-column {
                    height: 14px;
                    border-radius: 2px 2px 2px 2px;
                    display: flex;
                    align-items: center;
                    border: none;
                    padding: 2px;
                    margin-top: 6px;
                    box-sizing: border-box;
                }

                .ranking-column {
                    background: #021C5F;

                    .inside-column {
                        height: 10px;
                        border-radius: 2px 2px 2px 2px;
                        background: linear-gradient(143deg, #0E61FE 0%, #09C19F 100%);
                        transform: translate3d(0, 0, 0);
                    }
                }
            }

        }
    }

    .listBox.listBox2 {
        .row-item-right {
            .ranking-info {

                .ranking-value {
                    color: #FF4F27;
                }
            }

            .ranking-column {

                .inside-column {
                    background: linear-gradient(90deg, #FAC641 0%, #FA5961 100%);
                }
            }
        }
    }
}

.anim {
    transition: all 0.5s;
}
</style>